<template>
  <div :class="['timeBox', { fadeIn: true }]" @click="switchTime()" @contextmenu.prevent="">
    <div title="切换时制" class="watch hours" :style="styleFlag" @mouseover="move(true)" @mouseleave="move(false)">
      {{ timeNow.hours }}
    </div>
    <div class="watch minutes">{{ timeNow.minutes }}</div>
    <!-- 月份 -->
    <div class="watch mounth">
      <span class="watch day">{{ timeNow.weekDay }}</span> {{ timeNow.mounth }}
      <span class="watch day">{{ timeNow.day }}</span>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "../store"; // 引入pinia
import { ref, reactive, onMounted } from "vue";
const store = useStore();

const addZero = (data) => {
  // 补零函数
  if (data < 10) data = "0" + data;
  return data;
};
let timeNow = reactive({
  hours: "",
  minutes: "",
  mounth: '',
  day: '',
  weekDay: '',
});
// 时钟
const getTime = () => {
  setInterval(() => {
    let timeWatch = new Date();
    timeNow.mounth = timeWatch.getMonth() + 1;
    timeNow.hours = timeWatch.getHours();
    timeNow.day = timeWatch.getDate();
    switch (timeWatch.getDay()) {
      case 0:
        timeNow.weekDay = "Sun";
        break;
      case 1:
        timeNow.weekDay = "Mon";
        break;
      case 2:
        timeNow.weekDay = "Tue";
        break;
      case 3:
        timeNow.weekDay = "Wed";
        break;
      case 4:
        timeNow.weekDay = "Thur";
        break;
      case 5:
        timeNow.weekDay = "Fri";
        break;
      case 6:
        timeNow.weekDay = "Sat";
        break;

      default:
        break;
    }

    // 小时补零
    // 12小时制
    if (!store.user._24mode) {
      if (timeNow.hours > 12) {
        timeNow.hours -= 12;
      }
    }
    timeNow.hours = addZero(timeNow.hours);
    // 分钟补零
    timeNow.minutes = addZero(timeWatch.getMinutes());
  }, 1000);
};
onMounted(() => {
  getTime();
})
// 提示
let flag = true;
const switchTime = () => {
  if (flag) {
    store.setdata("_24mode", true);
    flag = false;
  } else {
    store.setdata("_24mode", false);
    flag = true;
  }
};
let shake = ref(false);
let styleFlag = reactive({
  transform: "scale(1)",
});
const move = (bool) => {
  shake.value = !shake.value;
  if (bool) {
    setTimeout(() => {
      styleFlag.transform = "scale(1.05)";
    }, 300);
    styleFlag.transform = "scale(1.05)";
  } else {
    setTimeout(() => {
      styleFlag.transform = "scale(1)";
    }, 300);
    styleFlag.transform = "scale(0.95)";
  }
};

// 天气api
</script>

<style scoped>
.timeBox {
  color: white;
  width: 210px;
  min-width: 168px;
  cursor: default;
  position: fixed;
  left: 1.875rem;
}

.watch {
  /* 一些样式 */
}

.hours {
  text-align: left;
  font-size: 80px;
  font-family: Thin;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.25s;
}

.mounth {
  text-align: left;
  font-size: 16px;
  font-family: Thin;
  letter-spacing: 2px;
  transition: all 0.25s;
  padding-left: 10px;
  margin-top: -20px;
}

.getBigIn {
  transform: scale(1.1);
}

.getSmallIn {
  transform: scale(1.05);
}

.getBigOut {
  transform: scale(1);
}

.getSmallOut {
  transform: scale(0.9);
}

.minutes {
  text-align: left;
  font-family: ExtraLight;
  font-size: 65px;
  padding-left: 5px;
  margin-top: -30px;
}

.fadeIn {
  animation: fade 2s;
}

@keyframes fade {
  0% {
    left: -14.375rem;
    opacity: 0;
  }

  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}
</style>
